<script setup>
import { reactive, ref } from 'vue'
import tableData from '~mock/auth'
import {addRole,updateRole} from '@/api/role'
import data from '@/views/dashboard/options/analysis1';
const emit=defineEmits(['flush'])
// 表单数据
const formData = ref({
  roleName: '',
  orderId: 0,
  roleCode: ''
})
// 表单验证
const formRules = reactive({
  name: [
    { required: true, message: '请输入角色名', trigger: 'blur' },
    { min: 2, max: 10, message: '请输入2~10个字符', trigger: 'blur' }
  ]
})
// 抽屉状态
let stateDrawer = ref(false)

// 暴露
defineExpose({
  stateDrawer,
  formData
})
const formRef = ref()
const confrom = () => {
  console.log(formData)
  formRef.value.validate(async(isSuccess) => {
    if (isSuccess) {
      let r
      console.log("formData.value.id",formData.value.id);
      if(formData.value.id>0){
        //修改
        r= await updateRole(formData.value)
      }else{
        //新增
        r= await addRole(formData.value)
      }
      if(r.code==200){
        ElMessage({type: 'success', message: '操作成功' })
        stateDrawer.value=false
        onReset()
        //调用父组件的函数，实现列表刷新
        emit('flush')
      }else{
        ElMessage({type: 'success', message: '操作失败' })
        onReset()
      }
      
    }
  })
}
function close () {
  console.log("close");
  onReset()
}
function onReset(){
  stateDrawer.value = false
  emit('flush')
}
</script>
<template>
  
  <el-drawer
    v-model="stateDrawer"
    :title="`${formData.id ? '修改' : '添加'}角色`"
    width="600"
    :before-close="() => (stateDrawer = false)"
    @closed="() => (formData = {})"
  >
    <el-form v-if="stateDrawer" size="large" label-width="80" :model="formData" ref="formRef">
      <el-form-item label="角色名称">
       
        <!-- <el-input type="text" placeholder="请输入角色名称" disabled value="超级管理员 " /> -->
        <el-input type="text" placeholder="请输入角色名称" v-model="formData.roleName" />
      </el-form-item>
      
      <el-form-item label="角色编码">
        <!-- <el-input type="text" placeholder="请输入角色名称" disabled value="超级管理员 " /> -->
        <el-input type="text" placeholder="请输入角色编码" v-model="formData.roleCode" />
      </el-form-item>
      <el-form-item label="角色顺序">
        <el-input type="number" placeholder="请输入角色顺序" v-model="formData.orderId" />
      </el-form-item>
      <el-form-item label="角色状态" prop="">
        <el-radio-group v-model="formData.state" class="ml-4">
          <el-radio label="1" size="large">正常</el-radio>
          <el-radio label="2" size="large">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="菜单权限">
        <el-tree
          :data="tableData.data"
          :props="{
            label: 'auth_name',
            value: 'auth_id'
          }"
          show-checkbox
        ></el-tree>
      </el-form-item> -->
      <el-form-item label="备注">
        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" :rows="3" />
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="confrom">确定</el-button>
        <el-button type="default" @click="stateDrawer = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
  <!-- 抽屉 -->
</template>
<style lang="scss" scoped></style>
